<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul,li,h1{
            padding:0;
            margin:0;
            list-style:none
        }
        #app{
            width:100%;
            display:flex;
            flex-direction:row;
        }
        ul{
            width:200px;
            flex-direction:column;
            color:#fff;
        }
        li{
            flex:1;
            background:#000;
            margin:5px auto;
            text-align:center;
            line-height:30px;
        }
        .about-detail{
            flex:1;
            margin-left:20px;
        }
        .about-detail h1{
            font-size:24px;
            color:blue;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.runtime.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.6.5/dist/vue-router.min.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <router-link to="/about" tag="li">关于公司</router-link>
            <router-link to="/contact" tag="li">联系我们</router-link>
        </ul>
        <router-view></router-view>
    </div>
    <template id="about-tmp">
        <div class="about-detail">
            <h1>北京XX科技有限公司</h1>
            <router-link to="/about/detail">公司简介</router-link>
            <router-link to="/about/governance">公司治理</router-link>
            <router-view></router-view>
        </div>
    </template>
    <template id="contact-tmp">
        <div class="about-detil">
            <h1>联系我们</h1>
            <p>公司位于北京市海淀区中关村科技园内，主营业务包括餐饮娱乐、服装设计等</p>
        </div>
    </template>
    <script>
        var about={template:'#about-tmp'}
        var contact={template:'#contact-tmp'}
        var detail={
            template:'<p>xx是全球领先......</p>'
        }
        var governance={
            template:'<p>公司坚持以客户为中心、以奋斗者为本......</p>'
        }
        var router=new VueRouter({
            routes:[
                {path:'/',redirect:'/about'},
                {
                    path:'/about',
                    component:about,
                    children:[
                        {path:'detail',component:detail},
                        {path:'governance',component:governance}
                    ]
                },
                {path:'/contact',component:contact}
            ]
        })
        var vm=new Vue({
            el:'#app',
            router
        })
    </script>
</body>
</html>
